<template>
  <div class="app-container">
    <!-- 搜索条件 -->
      <a-form :model="queryParams" ref="queryForm" size="small"  layout="inline">
          <a-row :span="24">
              <a-col :span="6">
                  <a-form-item label="AppName" prop="appName">
                      <a-input v-model="queryParams.appName" placeholder="请输入AppName" @keyup.enter.native="handleQuery" ></a-input>
                  </a-form-item>  
              </a-col>
              <a-col :span="5">
                  <a-form-item label="名称" prop="title">
                      <a-input v-model="queryParams.title" placeholder="名称" @keyup.enter.native="handleQuery"></a-input>
                  </a-form-item>
              </a-col>
              <a-col :span="2">
                  <a-form-item>
                      <a-button type="primary" icon="search" @click="handleQuery">搜索</a-button>
                  </a-form-item>
              </a-col>
              <a-col :span="2">
                  <a-form-item>
                      <a-button type="primary" icon="plus" @click="handleAdd" v-hasPermi="['xxl-job:group:add']"
                      style="background-color: rgb(19,206,102);color:white;border:none;">新增</a-button>
                  </a-form-item>
              </a-col>
          </a-row>
      </a-form>

      <!--select控制一个页面展示多少条-->
    <div>每页
      <a-select default-value="10" style="width: 80px" @change="handlePageSizeChange">
        <a-select-option value="10">
          10
        </a-select-option>
        <a-select-option value="20">
          20
        </a-select-option>
        <a-select-option value="30">
          30
        </a-select-option>
        <a-select-option value="50">
          50
        </a-select-option>
        <a-select-option value="100">
          100
        </a-select-option>
      </a-select>
      条记录
    </div>

    <!-- 表格数据 -->
      <a-table v-loading="loading" :columns="columns" :dataSource="grouplist" :pagination="false" :rowKey="record=>record.id">
          <span slot="addressType" slot-scope="text, record">
              <span v-if="record.addressType==0">自动注册</span>
              <span v-else>手动录入</span>
          </span>
           <span slot="addressList" slot-scope="text, record">
              <span v-if="machineFormat(record)">无</span>
              <span v-else>
                  <a-button type="link" @click="stateFormat(record)">查看({{ machinecount[record.id] }})</a-button>
              </span>
          </span> 
          <span slot="action" slot-scope="text, record">
              <a-dropdown-button type="primary">操作
                  <a-menu slot="overlay" @click="handleCommand($event, record)">
                      <a-menu-item key="edit">编辑</a-menu-item>
                      <a-menu-item key="del">删除</a-menu-item>
                  </a-menu>
                  <a-icon slot="icon" type="down" />
              </a-dropdown-button>
          </span>
      </a-table>

      <!-- 下方分页 -->
      <a-pagination v-model="pagination.current" :item-render="pagination.itemRender" :total="pagination.total"
      :page-size="pagination.pageSize"
      :show-total="(total) => `共 ${total} 条（总共${Math.ceil(total / this.pagination.pageSize)}页, ${total} 条记录）`"
      :page-size-options="pagination.pageSizeOptions" @change="handlePageChange">
    </a-pagination>

    <!-- 查看注册结点/机器地址 -->
      <a-modal :title="title" v-model:visible="check" width="20%">
        <div class="cell">{{ machine }}</div>
        <div slot="footer" class="dialog-footer">
          <a-button type="primary" @click="check = false">确定</a-button>
        </div>
      </a-modal>

      <!-- 新增/编辑执行器 -->
      <a-modal :title="title" v-model:visible="open" width="500px">
        <a-form-model ref="form" :model="form" :rules="rules" layout="horizontal" :label-col="{ span: 5 }" :wrapper-col="{ span:19 }">
              <a-form-model-item label="AppName" prop="appName">
                <a-input v-model:value="form.appName" placeholder="请输入AppName"></a-input>
              </a-form-model-item>
            <a-form-model-item label="名称" prop="title">
              <a-input v-model:value="form.title" placeholder="请输入执行器名称"></a-input>
            </a-form-model-item>
            <a-form-model-item label="注册方式" prop="addressType">
              <a-radio-group v-model:value="form.addressType">
                <a-radio :value="0" @change="changeregist">自动注册</a-radio>
                <a-radio :value="1" @change="changeregist">手动录入</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="机器地址" prop="addressList">
              <a-input type="textarea" rows="4" v-model:value="form.addressList" :disabled="registchange" placeholder="请输入执行器地址列表,多地址以英文逗号分隔"></a-input>
            </a-form-model-item>
        </a-form-model>
        <div slot="footer" class="dialog-footer">
                <a-button type="primary" @click="submitForm">保 存</a-button>
                <a-button @click="cancel">取 消</a-button>
            </div>
      </a-modal>
  </div>
</template>

<script>
import { listGroup,getGroup,addGroup,updateGroup,delGroup} from "@/api/xxl-job/group";

export default {
  name: "AntDesignGroup",
  data() {
    return {
      //注册结点数量
      machinecount:[],
      //注册结点/机器地址
      machine:'',
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      // 表格数据
      grouplist: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      check:false,
      //注册方式是否为自动
      registchange:true,
      regist:true,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        id:null,
        appName: null,
        title: null,
        addressType:0,
        addressList:null,
      },
      //表格内容
    columns: [{
      title: 'AppName',
      dataIndex: 'appName',
      align:'center',
    },
    {
      title: '名称',
      dataIndex: 'title',
      align:'center',
    },
    {
      title: '注册方式',
      dataIndex: 'addressType',
      align:'center',
      scopedSlots: { customRender: 'addressType' },
    },
    {
      title: 'OnLine机器地址',
      dataIndex: 'addressList',
      align:'center',
      scopedSlots: { customRender: 'addressList' },
    },
    {
      title: '操作',
      scopedSlots: { customRender: 'action' },
      align:'center',
    }],
    //pagination分页参数
    pagination: ({
        pageSize: 10, // 每页显示的条数
        showQuickJumper: false, // 是否可以快速跳转到指定页
        current: 1, // 当前页数
        total: 50, // 总条数
        itemRender(current, type, originalElement) {
          if (type === 'prev') {
            return <div style="padding-left:850px"><a>上页</a></div>;
          } else if (type === 'next') {
            return <a>下页</a>;
          }
          return originalElement;
        },
      }),
      // 表单参数
      form: {},
      // 表单校验
      rules:{
              appName: [
                { required: true, message: "AppName不能为空", trigger: "blur" },
                { min: 4, max: 64, message: 'AppName长度限制为4~64', trigger: 'blur' },
                {pattern:/^[a-z][0-9]|-|[a-z]$/,message:'限制以小写字母开头,由小写字母、数字和中划线组成'}
              ],
              title: [
                { required: true, message: "执行器名称不能为空", trigger: "blur" },
                { min: 4, max: 12, message: '名称长度限制为4~12', trigger: 'blur' }
              ], 
              addressType:[
              { required: true, message: "请选择注册方式", trigger: "change" },
              ]
          }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //计算注册结点数量
    machineFormat(row){
    if(row.addressList==''||row.addressList==null){
      return true
    }
    else{
      this.machinecount[row.id]=1
    for(let i=0;i<row.addressList.length;i++){
      if(row.addressList[i]==',')this.machinecount[row.id]++
    }
    return false
    }
  },
    //注册方式显示
    registformat(row){
      if(row.addressType==0){
        return '自动注册'
      }
      else if(row.addressType==1){
        return '手动录入'
      }
    },
    //查看注册结点
    stateFormat(row){
      this.machine= row.addressList.split(',').join('\n')
      this.check=true;
      this.title="注册结点";
      return this.machine
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      listGroup(this.queryParams).then(response => {
        this.grouplist = response.rows;
        this.pagination.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id:null,
        appName: null,
        title: null,
        addressType:0,
        addressList:null,
      };
      this.resetForm("form");
    },
    // 修改+删除
    handleCommand(command, row) {
      command = command.key
          if(command=="edit"){
            this.reset();
              const Id = row.id || this.ids
              getGroup(Id).then(response => {
                this.form = response.data;
                if(this.form.addressType==1){
                  this.registchange=false
                }
                else {
                  this.registchange=true
                }
                this.open = true;
                this.title = "修改执行器";
      });
          }
          else if(command=="del"){
            const ids = row.id || this.ids;
              this.$modal.confirm('确定删除执行器？').then(function() {
                return delGroup(ids);
              }).then(() => {
                this.getList();
                this.$modal.msgSuccess("删除成功");
              }).catch(() => {});
          }
      },
      /** 页码改变时的处理函数*/
    handlePageChange(page, pageSize) {
      this.queryParams.pageNum = page
      this.pagination.current = page
      this.getList()
    },
    /** 页码改变时的处理函数*/
    handlePageSizeChange(page) {
      this.queryParams.pageSize = page
      this.pagination.pageSize = page
      this.getList()
    },
      // 查看注册结点
      handleCheck(){
        this.check=true;
        this.title="注册结点";
      },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "新增执行器";
      this.registchange=true
    },
    //选择注册方式
    changeregist:function(e){
          if(e.target.value==0){
              this.registchange=true
          }
          else if(e.target.value==1){
              this.registchange=false
          }
      },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != undefined) {
            updateGroup(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addGroup(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
  }
};
</script>

<style>
/* 注册结点换行显示 */
.cell{
  white-space: pre-wrap !important;
}
</style>